<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/jiazai.css">
    <link rel="stylesheet" href="css/animate.css">
    <title>支付方式</title>
    <style>
        /* 自定义键盘区域 */
        
        .transaction-input-wrap {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 50;
            transition: .5s;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            background: transparent;
        }
        
        .trans-pass-content {
            height: auto;
            width: 80%;
            box-sizing: border-box;
            background: white;
            transition: .5s;
            border-radius: 5px;
        }
        
        .trans-hea>h1 {
            padding: 18px 0;
            font-size: 15px;
            text-align: center;
            background: #f5f5f5;
            border-radius: 5px 5px 0 0;
        }
        
        .trans-hea>p {
            text-align: center;
        }
        
        .trans-hea>p:first-of-type {
            padding-top: 20px;
            font-size: 13px;
            color: #999;
        }
        
        .trans-hea>p:last-of-type {
            padding-top: 12px;
            font-size: 20px;
            color: #5DAF2F;
        }
        
        .trans-num-wrap {
            margin-top: 40px;
            margin-bottom: 50px;
            padding: 0 20px;
        }
        
        .input-wrap {
            width: 100%;
            position: relative;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
            border-left: 1px solid #999;
        }
        
        .input-wrap:after {
            display: block;
            content: '';
            visibility: hidden;
            clear: both;
        }
        
        .input-wrap>div {
            position: relative;
            float: left;
            width: 16.66%;
            padding-top: 16.66%;
            box-sizing: border-box;
            border-right: 1px solid #999;
        }
        
        .input-wrap>div>p {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .input-wrap>div>p>span {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            /* background: black; */
        }
        
        .go-pay-btn {
            margin-top: 40px;
            width: 100%;
            padding: 16px 0;
            font-size: 18px;
            color: white;
            /* background: #5daf2f; */
            background: #999999;
        }
        
        .keyborad {
            width: 100%;
            height: 240px;
            background: #fff;
            position: fixed;
            z-index: 101;
            left: 0;
            bottom: 0;
            box-sizing: border-box;
            font-family: "microsoft yahei";
        }
        
        .keyborad ul {
            width: 75%;
            float: left;
        }
        
        .keyborad li {
            height: 60px;
            border-top: 1px solid #dedede;
            box-sizing: border-box;
        }
        
        .keyborad li dt {
            width: calc(100% / 3);
            height: 60px;
            float: left;
            text-align: center;
            line-height: 60px;
            font-size: 24px;
            font-family: "微软雅黑";
            box-sizing: border-box;
        }
        
        .keyborad li dt:nth-child(3n+2) {
            border-left: 1px solid #dedede;
            border-right: 1px solid #dedede;
        }
        
        .icon-jianpanxiahua {
            font-size: 32px !important;
        }
        
        .clear {
            clear: both;
        }
        
        .del {
            width: 25%;
            height: 120px;
            float: left;
            border-left: 1px solid #dedede;
            border-top: 1px solid #dedede;
            box-sizing: border-box;
            text-align: center;
            line-height: 120px;
        }
        
        .button {
            width: 25%;
            height: 120px;
            float: left;
            box-sizing: border-box;
            border-left: 1px solid #dedede;
            border-top: 1px solid #dedede;
            border-bottom: 1px solid #dedede;
            text-align: center;
            line-height: 120px;
            font-size: 20px !important;
        }
        
        .icon-jianpan_shanchu {
            font-size: 24px !important;
        }
        
        a,
        i,
        span,
        div {
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        dt,
        div {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        
        .range {
            border-top: 1px solid #dedede;
            height: 50px;
            display: none;
        }
        
        .range div {
            float: left;
        }
        
        .range .value {
            width: calc(100% - 100px);
            height: 50px;
        }
        
        .range .value input {
            width: 100%;
            margin-top: 20px;
        }
        
        .range .reduce,
        .range .add {
            width: 50px;
            height: 50px;
            text-align: center;
            font-size: 24px;
        }
        
        .range .reduce:before {
            content: "-";
            display: inline-block;
            width: 30px;
            height: 30px;
            background: green;
            line-height: 25px;
            margin-top: 10px;
            color: #fff;
            border-radius: 5px;
        }
        
        .range .add:before {
            content: "+";
            display: inline-block;
            width: 30px;
            height: 30px;
            background: red;
            line-height: 30px;
            font-weight: 400;
            margin-top: 10px;
            color: #fff;
            border-radius: 5px;
        }
        
        input[type=range] {
            -webkit-appearance: none;
            border-radius: 10px;
            /*这个属性设置使填充进度条时的图形为圆角*/
            background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
            background-size: 0% 100%;
        }
        
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }
        
        input[type=range]::-webkit-slider-runnable-track {
            height: 10px;
            border-radius: 10px;
            /*将轨道设为圆角的*/
            box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
            /*轨道内置阴影效果*/
        }
        
        input[type=range]:focus {
            outline: none;
        }
        
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 25px;
            width: 25px;
            margin-top: -10px;
            /*使滑块超出轨道部分的偏移量相等*/
            background: #ffffff;
            border-radius: 50%;
            /*外观设置为圆形*/
            border: solid 0.125em rgba(205, 224, 230, 0.5);
            /*设置边框*/
            box-shadow: 0 .125em .125em #3b4547;
            /*添加底部阴影*/
        }
        /* 自定义键盘区域 */
        /* 支付成功/失败弹窗 */
        
        .trans-hea>div {
            padding: 40px 0;
            text-align: center;
            font-size: 18px;
            color: #5DAF2F;
        }
        
        .pay-btn-wrap {
            display: flex;
            align-items: center;
        }
        
        .pay-btn-wrap>button {
            flex: 1 1 0;
            width: 100%;
            padding: 15px 0;
        }
        
        .pay-btn-wrap>button:first-of-type {
            background: #F5F5F5;
            color: #999999;
        }
        
        .pay-btn-wrap>button:last-of-type {
            background: #F5F5F5;
            color: #2590FE;
        }
        /* 支付成功/失败弹窗 */
    </style>
</head>

<body>
    <div id='app'>

        <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->

        <!-- 闪兑--自定义键盘 -->
        <transition enter-active-class='animated fadeIn' leave-active-class='animated fadeOut'>
            <div class='transaction-input-wrap' v-if='offTrans' @click='offTrans=false;close()'>
                <div class='trans-pass-content' @click.stop=''>
                    <div class='trans-hea'>
                        <h1>请输入交易密码</h1>
                    </div>
                    <div class='trans-num-wrap' @click='openKeyWord'>
                        <div class='input-wrap'>
                            <div>
                                <p>
                                    <span ref='input1'></span>
                                </p>
                            </div>
                            <div>
                                <p>
                                    <span ref='input2'></span>
                                </p>
                            </div>
                            <div>
                                <p>
                                    <span ref='input3'></span>
                                </p>
                            </div>
                            <div>
                                <p>
                                    <span ref='input4'></span>
                                </p>
                            </div>
                            <div>
                                <p>
                                    <span ref='input5'></span>
                                </p>
                            </div>
                            <div>
                                <p>
                                    <span ref='input6'></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <transition enter-active-class='animated fadeInUp'>
            <div class="keyborad" v-if='offKeyWord'>
                <ul>
                    <li>
                        <dt @click="clkValue('1')">1</dt>
                        <dt @click="clkValue('2')">2</dt>
                        <dt @click="clkValue('3')">3</dt>
                    </li>
                    <li>
                        <dt @click="clkValue('4')">4</dt>
                        <dt @click="clkValue('5')">5</dt>
                        <dt @click="clkValue('6')">6</dt></li>
                    <li>
                        <dt @click="clkValue('7')">7</dt>
                        <dt @click="clkValue('8')">8</dt>
                        <dt @click="clkValue('9')">9</dt></li>
                    <li>
                        <dt @click="clkValue('.')">.</dt>
                        <dt @click="clkValue('0')">0</dt>
                        <dt @click="hide" class="iconfont icon-jianpanxiahua" style="display:flex; justify-content: center; align-item:center;">
                                <img src="./img/key-down.svg">
                            </dt>
                    </li>
                </ul>
                <div id="del" @click="del" class="del iconfont icon-jianpan_shanchu" style="display:flex; justify-content: center; align-item:center;">
                    <img src="./img/key-del.svg">
                </div>
                <div id="btn" class="button" @click="clkSubmit">
                    提交
                </div>
            </div>
        </transition>
        <!-- 闪兑--自定义键盘 -->

        <!-- 提现成功 -->
        <transition enter-active-class='animated fadeIn'>
            <div class='transaction-input-wrap' v-if='offSuccess'>
                <div class='trans-pass-content' @click.stop=''>
                    <div class='trans-hea'>
                        <div style="padding:60px 0;color: #333333;" v-text='font'>
                            提现发起成功
                        </div>
                    </div>
                    <div class='pay-btn-wrap'>
                        <button class='go-index-btn' @click='_close();'>返回</button>
                        <button class='like-order-btn' @click='likeOrder'>查看记录</button>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 支付成功 -->

        <!-- 提现失败 -->
        <transition enter-active-class='animated fadeIn'>
            <div class='transaction-input-wrap' v-if='offFaile'>
                <div class='trans-pass-content' @click.stop=''>
                    <div class='trans-hea'>
                        <div style="padding:60px 0;color: #333333;" v-text='font'>
                            支付密码错误
                        </div>
                    </div>
                    <div class='pay-btn-wrap'>
                        <button class='go-index-btn' @click="forgetPas">忘记密码</button>
                        <button class='like-order-btn' @click='offTrans=true;offFaile=false;'>重新输入</button>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 支付失败 -->
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var send = function(url, data) {
            app.$data.url = url;
            app.$data.data = JSON.parse(data);
        };
        var app = new Vue({
            el: '#app',
            data: {
                jiazai: false,
                //键盘
                offKeyWord: false,
                //输入的6位数交易密码
                transPass: [],
                //控制提示输入密码弹窗
                offTrans: true,
                //控制支付成功弹窗
                offSuccess: false,
                //控制支付失败弹窗
                offFaile: false,
                //上级传过来的url
                url: '',
                //上级传过来的data数据
                data: {},
                //成功/失败的提示文字
                font: ''
            },
            methods: {
                //关闭上级页面蒙版和本页面
                close: function() {
                    var all = plus.webview.all();
                    for (var i = 0; i < all.length; i++) {
                        all[i].setStyle({
                            mask: 'none'
                        });
                    }
                    plus.webview.currentWebview().close('none');
                },
                //打开自定义键盘
                openKeyWord: function() {
                    if (this.offKeyWord) {
                        return;
                    }
                    var hei = $(document).height() - 470;
                    this.offKeyWord = true;
                    $('.transaction-input-wrap').css('bottom', "240px");
                },
                //输入交易密码的值
                clkValue: function(val) {
                    if (val == '.') {
                        return;
                    }
                    var len = this.transPass.length;
                    if (len == 6) {
                        $('.go-pay-btn').css('background', '#5DAF2F');
                        this.clkSubmit();
                        return;
                    }
                    $('.go-pay-btn').css('background', '#999');
                    var input = 'input' + (len + 1);
                    this.transPass.push(val);
                    this.$refs[input].style.background = 'black';
                    if (this.transPass.length == 6) {
                        this.clkSubmit();
                    }
                },
                //删除一个数值
                del: function() {
                    if (this.transPass.length == 0) {
                        return;
                    }
                    var len = this.transPass.length;
                    var input = 'input' + len;
                    this.$refs[input].style.background = '';
                    this.transPass.pop();
                },
                //自定义键盘的提交
                clkSubmit: function() {
                    if (this.transPass.length != 6) {
                        _toast('请输入正确的密码');
                        return;
                    }
                    this.sendOpen();
                },
                //隐藏自定义键盘
                hide: function() {
                    this.offKeyWord = false;
                    $('.transaction-input-wrap').css('bottom', "0");
                },
                //提交-请求接口
                sendOpen: function() {
                    this.jiazai = true;
                    var This = this;
                    var user = JSON.parse(localStorage.getItem('cc_user'));
                    This.data.userid = user.userid;
                    This.data.session = user.session;
                    This.data.coinsid = 1;
                    This.data.pin = This.transPass.join('');
                    if (This.url == HTTP + '/Appindex/todemand' || This.url == HTTP + '/Appindex/demandto') {
                        This.data = {
                            userid: user.userid,
                            session: user.session,
                            pin: This.transPass.join(''),
                            amount: This.data.amount
                        };
                    }
                    if (This.url == HTTP + '/Appindex/toregular') {
                        This.data = {
                            amount: This.data.amount,
                            userid: user.userid,
                            session: user.session,
                            pin: This.transPass.join(''),
                        };
                    }
                    _post(This.url, This.data, function(data) {
                        This.jiazai = false;
                        This.transPass = [];
                        for (var i = 1; i < 7; i++) {
                            This.$refs['input' + i].style.background = '';
                        }
                        This.offTrans = false;
                        This.offKeyWord = false;
                        This.font = data.msg;
                        if (data.status == 1) {
                            if (This.url == HTTP + '/Appindex/todemand' || This.url == HTTP + '/Appindex/demandto') {
                                _toast(data.msg);
                                setTimeout(function() {
                                    This.close();
                                }, 1000);
                            } else if (This.url == HTTP + '/Appindex/toregular') {
                                _toast(data.msg);
                                setTimeout(function() {
                                    plus.webview.getWebviewById('cunDinqi').close('none');
                                    This.close();
                                }, 1000);
                            } else {
                                //支付成功 弹出支付成功弹窗
                                This.offSuccess = true;
                            }
                        } else {
                            This.offFaile = true;
                        }
                    });
                },
                //查看订单
                likeOrder: function() {
                    var curr = plus.webview.currentWebview();
                    var web = _openHref({
                        url: 'bill-all.html',
                        id: 'billAll'
                    });
                    setTimeout(function() {
                        curr.hide();
                    }, 1000);
                    setTimeout(function() {
                        curr.close('none');
                    }, 2000);
                    setTimeout(function() {
                        web.evalJS("likeOrder()");
                    }, 200);
                },
                //忘记密码
                forgetPas: function() {
                    var curr = plus.webview.currentWebview();
                    setTimeout(function() {
                        curr.hide();
                    }, 1000);
                    setTimeout(function() {
                        curr.close('none');
                    }, 2000);
                    _openHref({
                        url: 'forget-pin.html',
                        id: 'forgetPin'
                    });
                }
            }
        });
    </script>
</body>

</html>